<template>
    <div class="box2">
        <div class="title">
            <p>年龄比例</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <!-- 图像图表的容器 -->
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script lang="ts" setup name="Age">
    import {ref,onMounted} from 'vue'
    import * as echarts from 'echarts'

    let charts=ref()

    // 组件挂载完毕初始化图形图表
    onMounted(()=>{
        let mychart=echarts.init(charts.value)
        // 设置关键字
        let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical', // 图例组件方向的设置
                right: 30,
                top:40,
                textStyle:{
                    color:'white',
                    fontSize:'14'
                }
            },
            series: [
                {
                    name: '男女比例',
                    type: 'pie',
                    radius: ['40%','70%'],
                    avoidLabelOverlap:false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label:{
                        show:true,
                        position:'inside',
                        color:'white'
                    },
                    data: [
                        { value: 1048, name: '0-10' },
                        { value: 735, name: '10-20' },
                        { value: 580, name: '20-50' },
                        { value: 484, name: '50-80' },
                        { value: 300, name: '80-~' }
                    ],
                    labelLine: {
                        show: false
                    }
                }
            ],
            // 调整图像图表位置
            grid:{
                left:0,
                right:0,
                top:0,
                bottom:0
            }
        }
        mychart.setOption(option)
    })
</script>

<style scoped lang="scss">
    .box2{
        width:100%;
        height:100%;
        background: url(../../images/dataScreen-main-cb.png) no-repeat;
        background-size: 100% 100%;

        .title{
            margin-left: 20px;
            p{
                color: white;
                font-size: 20px;
            }
        }

        .charts{
            height: 260px;
        }

    }
</style>